<template>
  <div id="app">
    <!-- {{ isLoggedIn }}dsadas -->
    <el-menu mode="horizontal" :default-active="activeIndex" class="el-menu-demo" @select="handleSelect" router
      style="place-content: center;justify-content: center;align-items: center; width: 100%;" :ellipsis="false">

      <img src="./assets/logo.png" style="width: 120px" />
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/knowledge-bases" v-if="isLoggedIn">知识库</el-menu-item>
      <el-menu-item index="/chat" v-if="isLoggedIn">AI SoDa</el-menu-item>
      <el-menu-item index="/roleAgentList" v-if="isLoggedIn">角色中心</el-menu-item>
      <el-menu-item index="/soundList" v-if="isLoggedIn">音色库</el-menu-item>
      <el-menu-item index="/deviceList" v-if="isLoggedIn">设备库</el-menu-item>
      <div class="right-menu" style="margin-right: 20px;">
        <el-button type="primary" plain @click="goToLogin" v-if="!isLoggedIn">登录</el-button>
        <el-dropdown v-else trigger="click">
          <el-button class="el-dropdown-link">
            <el-icon>
              <User />
            </el-icon>{{ username }}
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item @click="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button type="success" plain @click="goToRegister" v-if="!isLoggedIn">注册</el-button> -->
      </div>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      username: '',
      isLoggedIn: false
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
    goToLogin() {
      console.log("ss")
      this.$router.push('/login');
    },
    goToRegister() {
      this.$router.push('/register');
    },
    logout() {
      localStorage.removeItem('access_token');
      // this.isLoggedIn = false;
      this.username = '';
      this.$router.push('/login');
    },
    async tryLogin() {
      const token = localStorage.getItem('access_token');
      if (token) {
        let resp = await fetch(`${import.meta.env.VITE_API_URL}/user/userInfo`, {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })
        if (resp.status === 401) {
          localStorage.removeItem('access_token');
          this.$router.push('/login');
          return;
        }
        let data = await resp.json();
        console.log("dssdsa;:", data, data?.data?.username)
        if (data?.data?.username) {
          this.username = data.data.nickname;
          this.isLoggedIn = true
        } else {
          console.log("登陆失败")
          this.isLoggedIn = false
        }
      } else {
        this.isLoggedIn = false
      }
    }
  },

  mounted() {
    this.tryLogin()
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-menu-demo a {
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.right-menu {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-menu--horizontal>.el-menu-item:nth-child(7) {
  margin-right: auto;
}
</style>
